<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Free Guitar Chord Chart and Chords</title>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script language="JavaScript" type="text/javascript" src="guitar-setup.js"></script>
<script language="JavaScript" type="text/javascript" src="/music/usage.js"></script>
<script language="JavaScript" type="text/javascript" src="/music/chord-utils.js"></script>
<link type="text/css" rel="stylesheet" href="guitar-mb.css">
<script language="JavaScript" type="text/javascript">
showstaff = 0;
mobile = 1;
tcolor = "black";
icolor = "white";
lsuffix = "";
var minw = 196;
var minh = 340;
function SetupWidget() {
   var winw = 630, winh = 460;
   if (document.body && document.body.offsetWidth) {
      winw = document.body.offsetWidth;
      winh = document.body.offsetHeight;
   }
   if (document.compatMode=='CSS1Compat' &&
       document.documentElement &&
       document.documentElement.offsetWidth ) {
      winw = document.documentElement.offsetWidth;
      winh = document.documentElement.offsetHeight;
   }
   if (window.innerWidth && window.innerHeight) {
      winw = window.innerWidth;
      winh = window.innerHeight;
   }
   if ( winw < minw || winh < minh ) {
      var neww, newh
      var wpage = document.getElementById("wpage");
      if ( winw < minw ) {
         neww = winw - 2;
         wpage.style.width = neww+"px";
      }
      if ( winh < minh ) {
         newh = winh - 2;
         wpage.style.height = newh+"px";
      }
      wpage.style.overflow = "auto";
      wpage.scrollTop = 300;
   }
}
</script>
<style type="text/css">
.wpagecontainer {
   margin-left: auto;
   margin-right: auto;
   width: 248px;
   height: 343px;
   position: relative;
}

</style>
</head>

<body onload="StartGuitar();SetupWidget();" onkeypress="gSelectNote(event);" style="font-family: sans-serif;color:black;background: white;">
<div id="wpage" class="wpagecontainer" style="background: white;">


<div class="pagecenter">
<h1>Guitar Chords</h1>


<div style="font-size:12px;padding-bottom:3px;">
 by <a href="/guitar/" target="_blank">Howard Knight</a>
</div>


<div class="chordcontent">
<div class="chord" style="padding-left: 25px;padding-bottom:0px;">
 <div id="chordname" class="chordname">&nbsp;</div>

 <div id="str0" class="string"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="str1" class="string"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="str2" class="string"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="str3" class="string"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="str4" class="string"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="str5" class="string"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div style="clear:both"></div>

 <div class="nut" style="background-image:url('/music/images/nut6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div class="fret" style="background-image:url('/music/images/fret6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>

 <div id="pos0" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos1" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos2" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos3" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos4" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos5" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div style="clear:both"></div>

 <div class="fret" style="background-image:url('/music/images/fret6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>

 <div id="pos6" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos7" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos8" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos9" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos10" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos11" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div style="clear:both"></div>

 <div class="fret" style="background-image:url('/music/images/fret6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>

 <div id="pos12" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos13" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos14" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos15" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos16" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos17" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div style="clear:both"></div>

 <div class="fret" style="background-image:url('/music/images/fret6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>

 <div id="pos18" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos19" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos20" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos21" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos22" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos23" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div style="clear:both"></div>

 <div class="fret" style="background-image:url('/music/images/fret6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>

 <div id="pos24" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos25" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos26" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos27" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos28" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos29" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div style="clear:both"></div>

 <div class="fret" style="background-image:url('/music/images/fret6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>

 <div id="pos30" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos31" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos32" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos33" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos34" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos35" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div style="clear:both"></div>

 <div class="fret" style="background-image:url('/music/images/fret6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>

 <div id="pos36" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos37" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos38" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos39" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos40" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div id="pos41" class="pos"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div style="clear:both"></div>

 <div class="fret" style="background-image:url('/music/images/fret6.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>

 <div id="string0" class="note">&nbsp;</div>
 <div id="string1" class="note">&nbsp;</div>
 <div id="string2" class="note">&nbsp;</div>
 <div id="string3" class="note">&nbsp;</div>
 <div id="string4" class="note">&nbsp;</div>
 <div id="string5" class="note">&nbsp;</div>
 <div style="clear:both"></div>

 <div class="usebars" style="padding:0px;">
 <div class="checkbox" id="bars" onclick="setBarFlag();" style="background-image:url('/music/images/cb-unchecked.png');"><img src="/music/images/1x1.gif" alt="" width="1" height="1"></div>
 <div class="ctext">w/ Bar chords</div>
 </div>

</div>

<div class="controls">
 <form id="mando" action="">
 <div class="lists">

  <div style="display:none;">

      <select name="chord" size="12" onchange="setMando();">
      <option>C
      <option>Db
      <option>D
      <option>Eb
      <option>E
      <option>F
      <option>Gb
      <option>G
      <option>Ab
      <option>A
      <option>Bb
      <option>B
      </select>

  </div>
  <div style="border: 2px solid #000000;width:38px;">
   <div id="note0" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=0;setMando();">C</div>
   <div id="note1" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=1;setMando();">Db</div>
   <div id="note2" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=2;setMando();">D</div>
   <div id="note3" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=3;setMando();">Eb</div>
   <div id="note4" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=4;setMando();">E</div>
   <div id="note5" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=5;setMando();">F</div>
   <div id="note6" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=6;setMando();">Gb</div>
   <div id="note7" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=7;setMando();">G</div>
   <div id="note8" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=8;setMando();">Ab</div>
   <div id="note9" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=9;setMando();">A</div>
   <div id="note10" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=10;setMando();">Bb</div>
   <div id="note11" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').chord.selectedIndex=11;setMando();">B</div>
  </div>

 </div>
 <div class="lists">
  <div class="chtype">
   <div class="chtcell"><input type="radio" name="type" checked onclick="setMando();"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div style="clear:both;"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div style="clear:both;"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div style="clear:both;"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div class="chtcell"><input type="radio" name="type" onclick="setMando();"></div>
   <div style="clear:both;"></div>

  </div>

  <div style="border: 2px solid #000000;width:48px;">
   <div id="chtype0" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[0].checked=true;setMando();">maj</div>
   <div id="chtype1" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[1].checked=true;setMando();">m</div>
   <div id="chtype2" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[2].checked=true;setMando();">7th</div>
   <div id="chtype3" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[3].checked=true;setMando();">m7</div>
   <div id="chtype4" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[4].checked=true;setMando();">maj7</div>
   <div id="chtype5" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[5].checked=true;setMando();">6th</div>
   <div id="chtype6" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[6].checked=true;setMando();">m6</div>
   <div id="chtype7" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[7].checked=true;setMando();">9th</div>
   <div id="chtype8" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[8].checked=true;setMando();">dim</div>
   <div id="chtype9" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[9].checked=true;setMando();">aug</div>
   <div id="chtype10" class="mlist" style="background:transparent;color:black" onclick="document.getElementById('mando').type[10].checked=true;setMando();">sus4</div>
  </div>


 </div>
 <div style="clear:both"></div>
 <div class="sharps" style="padding-top:4px;">
  <div id="sharps" style="background:transparent;color:black;margin-top:5px;margin-left: auto;margin-right: auto;border: 2px solid #000000;" class="shbutton" onmousedown="sharpsPress()" onmouseout="sharpsRelease()" onmouseup="sharpsRelease()" onclick="setSharpsFlag()">Use Sharps</div>
 </div>
 </form>


</div>
<div style="clear:both;"></div>
</div>


<span style="display:none">

<form name="usebars" action="">
<input type="checkbox" name="bars" onclick="setBarFlag();"><span class="cradio">Use bar chords</span><br>
</form>
</span>

<script type="text/javascript"><!--
google_ad_client = "pub-1819631605780576";
/* 234x60, created 10/30/11 */
google_ad_slot = "2544139025";
google_ad_width = 234;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br>

<font size="-2">Copyright &copy; 2011 - 2014 <a href="/guitar/" target="_blank"d>Howard Knight</a></font>
</div>

</div>
</body>
</html>
